<template>
  <el-container v-loading="loading">
    <div class="box">
      <h3>{{activeheader}}</h3>
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="150px" class="demo-ruleForm">
        
        <el-form-item label="姓名" prop="userName">
            <el-input class="input-width" v-model="ruleForm.userName" placeholder="请输入用户姓名"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="sex">
            <el-select class="input-width" v-model="ruleForm.sex" placeholder="请选择用户性别">
              <el-option
                v-for="item in sexList"
                :key="item.dValue"
                :label="item.dValue"
                :value="item.dKey"
              ></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="地区" prop="province">
            <user-address
            @countryChange="countryChange"
            :defaultValue="defaultAddress"
            ref="userfileAddress"
            seletStyle="width:217px"
          />
        </el-form-item>
        <el-form-item label="所属地区负责人" prop="areaOwnerId">
            <el-select class="input-width" v-model="ruleForm.areaOwnerId" placeholder="请选择所属地区负责人">
              <el-option
                v-for="item in arealist"
                :key="item.id"
                :label="item.userName"
                :value="item.id"
              ></el-option>
            </el-select>
        </el-form-item>
        <!-- <el-form-item label="所在医院" prop="hospitalId">
            <el-select class="input-width" v-model="ruleForm.hospitalId" placeholder="请选择" :disabled="hosArray.length < 1">
              <el-option v-for="item in hosArray" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
            <span class="red" v-if="hosArray.length < 1">{{hosTips}}</span>
            <el-button type="primary" v-if="ruleForm.hospitalId" @click="hosAdd">添加</el-button>
        </el-form-item> -->
        <el-form-item label="所在医院">
              <el-tag
              :key="tag.id"
              v-for="tag in hosNameArray"
              :disable-transitions="false"
              >
              {{tag.name}}
            </el-tag>
        </el-form-item>
        <el-form-item label="所在科室" prop="dept1">
             <el-select style="width:217px;margin-right:20px;"
          @change="changeDep"
          v-model="ruleForm.dept1"
          class="com-input"
          placeholder="请选择一级科室"
        >
          <el-option
            v-for="item in codeTypes"
            :key="item.dKey"
            :label="item.dValue"
            :value="item.dKey"
          />
        </el-select>

        <el-select
         style="width:217px;"
          v-model="ruleForm.dept2"
          class="com-input"
          placeholder="请选择二级科室"
        >
          <el-option
            v-for="item in codeTypes2"
            :key="item.dKey"
            :label="item.dValue"
            :value="item.dKey"
          />
        </el-select>
        </el-form-item>
        <el-form-item label="护士职称" prop="level">
        <el-select
         style="width:217px;"
          v-model="ruleForm.level"
          class="com-input"
          placeholder="请选择护士职称"
        >
          <el-option
            v-for="item in levelList"
            :key="item.dKey"
            :label="item.dValue"
            :value="item.dKey"
          />
        </el-select>
        </el-form-item>
        <el-form-item label="护士证/资格证照" prop="nurseNum">
            <el-input class="input-width2" v-model="ruleForm.nurseNum" placeholder="请输入内容"></el-input>
        </el-form-item>
        <el-form-item label="身份证号" prop="paper">
            <el-input class="input-width2" v-model="ruleForm.paper" placeholder="请输入内容"></el-input>
        </el-form-item>
        <el-form-item label="手机号码" prop="mobile">
            <el-input class="input-width" v-model="ruleForm.mobile" placeholder="请输入内容"></el-input>
        </el-form-item>
        <el-form-item label="银行名称" prop="bank">
            <el-input class="input-width2" v-model="ruleForm.bank" placeholder="请输入内容"></el-input>
        </el-form-item>
        <el-form-item label="银行账号" prop="bankCardNum">
            <el-input class="input-width2" v-model="ruleForm.bankCardNum" placeholder="请输入内容"></el-input>
        </el-form-item>
        <el-form-item label="收件地址" prop="address">
            <el-input class="input-width2" v-model="ruleForm.address" placeholder="请输入内容"></el-input>
        </el-form-item>
         <el-form-item label="电子邮件" prop="email">
            <el-input class="input-width" v-model="ruleForm.email" placeholder="请输入内容"></el-input>
        </el-form-item>
        <el-form-item label="身份证号正面">
             <img @click="imgLook(paperPics2)" v-if="paperPics2" :src="paperPics2" class="avatar">
        </el-form-item> 
        <el-form-item label="身份证号反面">
           <img @click="imgLook(paperPics3)" v-if="paperPics3" :src="paperPics3" class="avatar">
        </el-form-item> 
        <el-form-item label="护士证照">
            <img @click="imgLook(ruleForm.nursePics)" v-if="ruleForm.nursePics" :src="ruleForm.nursePics" class="avatar">
        </el-form-item> 
        
         <!-- <el-form-item label="人员技能标签" prop="skills">
            <el-select class="input-width" v-model="skill" placeholder="请选择">
              <el-option
                v-for="item in skillTagList"
                :key="item.id"
                :label="item.dValue"
                :value="item.dKey"
              ></el-option>
            </el-select>
            <el-button type="primary"  v-if="skill" @click="skillAdd">添加</el-button>
        </el-form-item>
        <el-form-item v-if="skillArry.length > 0">
             <el-tag
              :key="tag.id"
              v-for="tag in skillArry"
              closable
              :disable-transitions="false"
              @close="delSkill(tag.id)">
              {{tag.name}}
            </el-tag>
        </el-form-item>
         <el-form-item label="人员排版选择">
              <el-date-picker
                class="input-width"
                v-model="paibandates"
                type="dates"
                value-format="yyyy-MM-dd"
                placeholder="选择日期">
              </el-date-picker>
              <el-button type="primary" @click="getpaiban">添加</el-button>
        </el-form-item>
        <el-form-item v-if="paibanArry.length > 0">
             <el-tag
              :key="index"
              v-for="(tag,index) in paibanArry"
              closable
              :disable-transitions="false"
              @close="delpaiban(index)">
              {{tag.date}}<el-checkbox  v-model="tag.shangwu">上午</el-checkbox><el-checkbox  v-model="tag.xiawu">下午</el-checkbox>
            </el-tag>
        </el-form-item>
         <el-form-item label="备注" prop="remark">
            <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="ruleForm.remark"></el-input>
        </el-form-item> -->
         <el-form-item>
             <el-button type="primary" @click="submit('0')">审核通过</el-button>
             <el-button type="danger" @click="submit('-2')">审核不通过</el-button>
             <el-button @click="cancle">取消</el-button>
        </el-form-item>
      </el-form> 
      <el-dialog custom-class="bigDig" :visible.sync="imgDiv" :show-close="false">
         <img :src="imgUrl">
     </el-dialog> 
    </div>
  </el-container>
</template>

<script>
import check from "utils/check";
import { sexList, skillTagList } from "data/listBody";
import { FileChange } from "utils/formData";
import UserAddress from "components/address";
import queryString from "querystring";

const headers = ["新增人员", "驻场人员审核"];
const hosTips = ["请先选择地区", "该地区没有对应医院信息,请先新建医院"];
const dateMorList = [
  { id: "11", name: "星期一上午" },
  { id: "21", name: "星期二上午" },
  { id: "31", name: "星期三上午" },
  { id: "41", name: "星期四上午" },
  { id: "51", name: "星期五上午" }
];
const dateAfterList = [
  { id: "12", name: "星期一下午" },
  { id: "22", name: "星期二下午" },
  { id: "32", name: "星期三下午" },
  { id: "42", name: "星期四下午" },
  { id: "52", name: "星期五下午" }
];

let hosChange = true; //是否请求医院列表
export default {
  name: "addUserCheck",
  data() {
    return {
      imgDiv: false,
      imgUrl: "",
      ruleForm:{
        userName: "",
        sex: "",
        hospitalId:"",
        hospitalIds: "",
        skills: "",
        paper: "",
        mobile: "",
        bank: "",
        bankCardNum: "",
        areaOwner: false,
        remark: "",
        province:"",
        city:"",
        country:"",
        workTimes:"",
        areaOwnerId:"",
        dept1:"",
        dept2:"",
        level:"",
        address:"",
        email:"",
        paperPics:"",
        nursePics:"",
        state:"0",
        nurseNum:""
      },
       rules: {
          userName: [
            { required: false, message: '请输入姓名', trigger: 'blur' }
          ],
          sex: [
            { required: false, message: '请选择性别', trigger: 'change' }
          ],
          province: [
            { required: false, message: '请选择地区', trigger: 'change' }
          ],
          hospitalId: [
            { required: false, message: '请添加所在医院', trigger: 'change' }
          ],
          paper: [
            { required: false, message: '请输入身份证号', trigger: 'blur' }
          ],
          mobile: [
            { required: false, message: '请输入手机号', trigger: 'blur' }
          ],
          bank: [
            { required: false, message: '请输入银行名称', trigger: 'blur' }
          ],
          bankCardNum: [
            { required: false, message: '请输入银行账号', trigger: 'blur' }
          ],
          dept1: [
            { required: false, message: '请选择所在科室', trigger: 'change' }
          ],
          level: [
            { required: false, message: '请选择护士职称', trigger: 'change' }
          ],
          address: [
            { required: false, message: '请输入收件地址', trigger: 'blur' }
          ]
        },
      skill:"",
      sexList,
      skillTagList,
      hosTips: hosTips[0],
      hospitalIdArray: [],
      hosArray: [],
      hosNameArray: [],
      loading: false,
      skillArry: [],
      hospitalArry: [],
      dateMorList: dateMorList,
      dateAfterList: dateAfterList,
      dateAfterChecked: [],
      defaultAddress: null, //默认地址
      activeheader: headers[0],
      check: check.methods.check,
      checkTip: check.tips.checkTip,
      arealist:[],
      codeTypes: [],
      codeTypes2: [],
      levelList:[],
      paperPics2:"",
      paperPics3:"",
      paibandates:[],
      paibanArry:[]
    };
  },
  components: {
    UserAddress
  },
  mounted() {
    this.getarea();
    this.editInit();
    this.getDict("1"); //一级科室
    this.getDict("4"); //护士职称
  },
  methods: {
    imgLook(url) {
      this.imgDiv = true;
      this.imgUrl = url;
    },
      getDict(id) {
      this.axios
        .get("/dict?groupId=" + id)
        .then(res => {
          if (res.data.code == 200) {
            if (id == "1") {
              this.codeTypes = res.data.data;
            } else if (id == "4") {
              this.levelList = res.data.data;
            }  
          } else {
            this.$message(this.mes.busy);
          }
        })
        .catch(err => {
          console.log(err);
          this.$message(this.mes.busy);
        });
    },
      changeDep(){
      var parentKey=this.ruleForm.dept1;
      this.axios
        .get("/dict?groupId=2&parentKey=" + parentKey)
        .then(res => {
          if (res.data.code == 200) {
            this.codeTypes2 = res.data.data;
          } else {
            this.$message(this.mes.busy);
          }
        })
        .catch(err => {
          console.log(err);
          this.$message(this.mes.busy);
        });
    },
    getarea(){
      
       const param = queryString.stringify({ province:this.ruleForm.province, city:this.ruleForm.city, country:this.ruleForm.country,areaOwner:true });
       this.api
        .get(`/groundPerson?${param}`)
        .then(res => {
          this.loading = false;
          if (!res.data) return;
          this.arealist = res.data.list;
        })
        .catch(err => {
          console.log(err);
          this.$message(err.data);
        });
    },
    fileChange2(e) {
      this.loading = true;
      FileChange(e, res => {
        this.loading = false;
        this.paperPics2 = res.url;
      });
    },
    fileChange3(e) {
      this.loading = true;
      FileChange(e, res => {
        this.loading = false;
        this.paperPics3 = res.url;
      });
    },
    fileChange4(e) {
      this.loading = true;
      FileChange(e, res => {
        this.loading = false;
        this.ruleForm.nursePics = res.url;
      });
    },
    delPhoto2() {
      this.paperPics2 = "";
    },
    delPhoto3() {
      this.paperPics3 = "";
    },
    delPhoto4() {
      this.ruleForm.nursePics = "";
    },
    editInit() {
      let { type, id } = this.$route.query;
      if (type === "edit") this.activeheader = headers[1];
      if (!id) return;
      this.loading = true;
      this.api
        .get(`/groundPerson/${id}`)
        .then(response => {
          this.ruleForm=response.data;
          this.changeDep();
          if(this.ruleForm.paperPics){
             this.paperPics2=this.ruleForm.paperPics.split(',')[0];
             this.paperPics3=this.ruleForm.paperPics.split(',')[1]; 
          }
          this.loading = false;
          if (this.ruleForm.hospitalIds) {
            hosChange = false;
            const param = queryString.stringify({ province:this.ruleForm.province, city:this.ruleForm.city, country:this.ruleForm.country });
            this.api.get(`/hospital?${param}`).then(res => {
              this.hosArray = res.data.list;
              let hospitalArr = this.ruleForm.hospitalIds.split(",");
              hospitalArr.map(item => {
                this.hosAdd(item);
              });
              setTimeout(() => {
                hosChange = true;
              }, 1000);
            });
          }

          if (this.ruleForm.skills) {
            let skillArr = this.ruleForm.skills.split(",");
            skillArr.map(item => {
              this.skillAdd(item);
            });
          }

          if (this.ruleForm.workTimes) {
            this.paibanArry=JSON.parse(this.ruleForm.workTimes);
            for(var i=0;i<this.paibanArry.length;i++){
              this.paibandates.push(this.paibanArry[i].date)
            }
          }
          this.defaultAddress = {
            province: this.ruleForm.province,
          city: this.ruleForm.city,
          country: this.ruleForm.country
          };
        })
        .catch(err => {
          console.log(err);
          this.loading = false;
          this.$message(err.data.message);
        });
    },
    hosAdd(key) {
      let hosId = this.ruleForm.hospitalId;
      key = parseInt(key);
      if (key) hosId = key;
      let hosArr = this.hosArray.filter(item => {
        return item.id == hosId;
      });
      let filterArry = this.hosNameArray.filter(item => {
        return item.id == hosId;
      });
      let hosName = hosArr[0].name;
      if (!hosName) hosName = hosArr[0].id;
      if (filterArry.length > 0) return;
      let hosNameArray = [].concat([], this.hosNameArray, {
        id: hosId,
        name: hosName
      });
      this.hosNameArray = hosNameArray;
    },
    delSkill(id){
      this.skillArry.splice(this.skillArry.findIndex(item => item.id === id), 1)
    },
    delpaiban(index){
      this.paibanArry.splice(index, 1);
      this.paibandates.splice(index, 1);
    },
    skillAdd(key) {
      let skillId = this.skill;
      key = parseInt(key);
      if (key) skillId = key;
      let skillArr = this.skillTagList.filter(item => {
        return item.dKey == skillId;
      });
      let filterArry = this.skillArry.filter(item => {
        return item.id == skillId;
      });
      let skillName = skillArr[0].dValue;
      if (filterArry.length > 0) return;
      let skillArry = [].concat([], this.skillArry, {
        id: skillId,
        name: skillName
      });
      this.skillArry = skillArry;
    },
    getpaiban(){
      this.paibanArry=[];
      for(var i=0;i<this.paibandates.length;i++){
        this.paibanArry.push({date:this.paibandates[i],shangwu:false,xiawu:false})
      }
    },
    submit(is) {
      
     this.ruleForm.state=is;
      
       console.log(this.paibanArry);
       this.ruleForm.workTimes = JSON.stringify(this.paibanArry);
       this.ruleForm.paperPics=this.paperPics2+','+this.paperPics3;
      let addressParams = this.$refs.userfileAddress.getData();
      this.ruleForm.province=addressParams.province;
      this.ruleForm.city=addressParams.city;
      this.ruleForm.country=addressParams.country;
      let hospitalIdsArry = this.hosNameArray.map(item => {
        return item.id;
      });
      this.ruleForm.hospitalIds = hospitalIdsArry.join(",");

      let skillsArry = this.skillArry.map(item => {
        return item.id;
      });
      this.ruleForm.skills = skillsArry.join(",");

      
      delete this.ruleForm.operatorId;
      delete this.ruleForm.createTime;
      delete this.ruleForm.updateTime;
      delete this.ruleForm.deleteFlag;
      delete this.ruleForm.handler;
      delete this.ruleForm.hibernateLazyInitializer;
      delete this.ruleForm.nurseNum;
      delete this.ruleForm.wechatName;
      delete this.ruleForm.openid;
      delete this.ruleForm.sign;
      this.$refs['ruleForm'].validate((valid) => {
          if (valid) {
             this.addUser(this.ruleForm)
          } else {
            console.log('error submit!!');
            return false;
          }
        });
    },
    editUser(param) {
      //修改用户
      param.id = this.ruleForm.id;
      if(this.ruleForm.areaOwnerId==null){
        this.ruleForm.areaOwnerId=''
      }
      this.loading = true;
      this.api
        .put("/groundPerson",param, "form")
        .then(res => {
          this.loading = false;
          this.$router.go(-1);
        })
        .catch(err => {
          console.log(err);
          this.loading = false;
          this.$message(err.data.message);
        });
    },
    addUser(param) {
      //添加用户
      if (this.$route.query.type === "edit") return this.editUser(param);
      this.loading = true;
      this.api
        .post("/groundPerson", param, "form")
        .then(res => {
          this.$router.go(-1);
          this.loading = false;
        })
        .catch(err => {
          console.log(err);
          this.loading = false;
          this.$message(err.data.message);
        });
    },
    countryChange(data) {
      let addressParams = this.$refs.userfileAddress.getData();
      this.ruleForm.province = addressParams.province;
      this.ruleForm.city = addressParams.city;
      this.ruleForm.country = addressParams.country;
      this.getarea();
      const param = queryString.stringify(data || {});
      if (!hosChange) return;
      this.api
        .get(`/hospital?${param}`)
        .then(res => {
          this.hosArray = res.data.list;
          this.hosNameArray = [];
          if (this.hospitalArry < 1) this.hosTips = hosTips[1];
        })
        .catch(err => {
          console.log(err);
          this.$message(err.message);
        });
    },
    cancle() {
      this.$router.go(-1);
    }
  },
  // computed: {
  //     newArry() {
  //       return this.paibanArry.length;
  //     }
  //   },
  //   watch: {
  //     newArry(val) {
  //       this.getpaiban()
  //     }
  //   }
};
</script>
 
<style lang="less" scoped>
.box {
  padding-left: 20px;
  h3 {
    margin-top: 10px;
    margin-bottom: 20px;
  }
}
.el-tag + .el-tag {
    margin-left: 10px;
  }
span {
  &.add {
    cursor: pointer;
    font-size: 12px;
  }
  &.red {
    color: red;
    font-size: 12px;
  }
}

.input-width {
  width: 216px;margin-right:10px;
}
.input-width2 {
  width: 400px;margin-right:10px;
}
.photoDel {
  margin-left: 20px;
  cursor: pointer;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 120px;
  height: 120px;
  line-height: 120px;
  text-align: center;
}
.avatar {
  width: 120px;
  height: 120px;
  display: block;
}
.el-tag .el-checkbox {
  margin-left:10px;
}
.bigDig {
  background: none;
}
.bigDig .el-dialog__body {
  padding: 0px !important;
}
.bigDig img {
  width: 100%;
}
</style>
 